import React, { useState } from 'react';
import { Badge } from 'antd';

import { ReactSortable } from "ereact-sortablejs";

//面板的项
const ControlItems = (props) => {

    const { list = [] } = props;
    const [state, setState] = useState(list.map(item => {
        return { ...item, control: true };
    }));

    //选项
    const opts = {
        group: {
            name: 'controls',
            pull: 'clone',
            put: false,
        },
        sort: false,
    };


    return <ReactSortable
        {...opts}
        list={state}
        setList={(newState) => {
            //console.log(newState);
            setState(newState);
        }}>{state.map(control => {
            return <div key={control.id}>
                <Badge color="#1890ff" text={control.label} />
            </div>
        })}
    </ReactSortable>
}


export default ControlItems